{include file="public/head"/}
<style>
    .proclass{
        padding: 0;list-style: none;
    }
    .proclass li{
        height: 30px;line-height: 30px;
    }
    .listtop{
        height: 28px;background: #fafafa;border-bottom: #ccc 1px solid;padding: 4px 12px;box-sizing: border-box;line-height: 20px;
    }
    .addtz{
        padding: 0;
    }
    .addtz li{
        height: 34px;line-height: 34px;
    }
    .addtz li span{
        padding: 0 12px 0 12px;
    }
</style>
<div class="container-fluid"  id="main">
        <div class="row clearfix">
                <div class="col-md-12 column">
                    <div class="alert alert-dismissable alert-info">
                        <button type="button" class="close">×</button>
                        <p></p>
                    </div>
                </div>
            </div>
        <div class="ntDesktop">
    <div class="ntDesktop-head" v-cloak>{{title}}</div>
    <div class="row" style="padding-top:12px">
      <div class="col-md-8 column">
        <ul class="nav nav-tabs">
            <li role="presentation" class="active"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab" @click="title='概要'">概要</a></li>
            <li role="presentation" v-if="type=='edit'">
                <a href="#introduce" aria-controls="introduce" role="tab" data-toggle="tab" @click="getlistdata">介绍</a>
            </li>
            <li v-if="type=='edit'">
                <a href="#accessories" data-toggle="tab" @click="getitemdata">{:strtoupper(lang("accessory"))}</a>
            </li>
            <li v-if="type=='edit'">
                <a href="#img" data-toggle="tab" @click="getimgdata">{:strtoupper(lang("image"))}</a>
            </li>
        </ul>
      </div>
      
      <div class="col-md-4 column text-right" >
            <div>
                <button class="btn btn-default" @click="subfn('back')"><span class="glyphicon glyphicon-chevron-left"></span>保存并返回</button>
                <span style="padding:10px">&nbsp;</span>
                <button class="btn btn-default" @click="fanhui"><span class="glyphicon glyphicon-chevron-left"></span>{:strtoupper(lang('back_to_list'))}</button>
                <span style="padding:10px">&nbsp;</span>
                <a href="javascript:;" @click="subfn" class="btn btn-primary" style="padding-left:48px;padding-right:48px;margin-right:20px"> <span class="glyphicon glyphicon-floppy-disk"></span> {:strtoupper(lang('save'))} </a>
            </div>
          </div>
    </div>

    <div class="tab-content">
        <!-- 概要 -->
        <div  role="tabpanel" class="tab-pane active row" id="profile" style="margin-top:20px">
            <div class="col-md-12">
                <ul class="nav nav-tabs">
                    <li :class="{'active':index==0}" @click="changelange(lang.code)" v-for="(lang,index) in langs">
                        <a :href="'#'+lang.code" data-toggle="tab"><!-- {:strtoupper(lang('Chinese'))} --> {{lang.name}}</a>
                    </li>
                </ul>
                <div class="tab-content">
                    <div role="tabpanel" :class="{'tab-pane':true, 'active':L_index==0}" :id="lang.code" v-for="(lang,L_index) in langs">
                        <div class="row" style="padding:20px 20px 0px 20px">
                                <div class="col-md-12">
                                <table class="table table-striped">
                                    <tr>
                                    <td>{:strtoupper(lang("product_name"))}<span class="required"></span></td>
                                    <td class="proname-input">
                                        <input type="text" v-model="dataval[L_index].proname" class="form-control" :placeholder="lang.name">
                                    </td>
                                    </tr>
                                    <tr>
                                    <td>{:strtoupper(lang("introduction"))}</td>
                                    <td class="proname-input">
                                        <input type="text" v-model="dataval[L_index].proint" class="form-control" placeholder="{:lang('introduction')}">
                                    </td>
                                    </tr>
                                    <tr>
                                    <td>{:strtoupper(lang("brand"))}</td>
                                    <td>
                                        <div class="input-group">
                                            <select  class="form-control" name="" id="brand" v-model="brandval" v-cloak>
                                                <option value="0">{:strtoupper(lang('please_select_product_brand'))}</option>
                                                <option :value="item1.id" v-for="(item1,index1) in brand">{{item1.name}}</option>
                                            </select>
                                        </div>
                                    </td>
                                    </tr>
                                    <tr>
                                    <td>NCM</td>
                                    <td class="proname-input">
                                        <input type="text" v-model="ncm" class="form-control" placeholder="海关编码">
                                    </td>
                                    </tr>
                                    <tr v-cloak>
                                        <td>{:strtoupper(lang('product_category'))}</td>
                                        <td>
                                            {{showcat}}
                                            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#procat_setModal" style="float:right"><span class="fa fa-boxes"></span>{:strtoupper(lang("set_up_product_categories"))}</button>
                                        </td>
                                    </tr>
                                    <tr>
                                    <td>{:strtoupper(lang('status'))}</td>
                                    <td class="proname-input">
                                        <label class="checkbox-inline">
                                            <input type="radio" :name="'optionval'+lang.code" value="3"  @click="changeradio(1)" :checked="cheradioval==1"> {:strtoupper(lang('normal'))}
                                        </label>
                                        <label class="checkbox-inline">
                                            <input type="radio" :name="'optionval'+lang.code" value="4"  @click="changeradio(4)" :checked="cheradioval==4"> {:strtoupper(lang("off_the_shelf"))}
                                        </label>
                                        <label class="checkbox-inline">
                                            <input type="radio" :name="'optionval'+lang.code" value="2" @click="changeradio(2)" :checked="cheradioval==2"> {:strtoupper(lang('delete'))}
                                        </label>
                                    </td>
                                    </tr>
                                    <tr>
                                        <td>是否可售</td>
                                        <td class="proname-input">
                                            <label class="checkbox-inline">
                                                <input type="radio" :name="'isfei_zh'+lang.code" value="1"  @click="changefei(1)" :checked="isfei==1"> {:strtoupper(lang('yes'))}
                                            </label>
                                            <label class="checkbox-inline">
                                                <input type="radio" :name="'isfei_zh'+lang.code" value="0" @click="changefei(0)" :checked="isfei==0"> {:strtoupper(lang('no'))}
                                            </label>
                                        </td>
                                    </tr>
                                </table>
                                <!-- 品种设置 -->
                                <div>
                                    <div class="ntTitle">{:strtoupper(lang("variety_settings"))}</div>
                                    <table class="table table-striped table-hover ntTable" v-cloak>
                                        <thead>
                                            <tr>
                                                <th>{:strtoupper(lang("model"))}</th>
                                                <th>{:strtoupper(lang("factory_model"))}</th>
                                                <th><a href="#" data-toggle="tooltip" data-placement="top" title="每个包装的产品数量">{:strtoupper(lang('package'))}</a><span class="required"></span></th>
                                                <th>{:strtoupper(lang("quantity"))}/CTN <span class="required"></span></th>
                                                <th>{:strtoupper(lang("dimension"))}/CTN <span class="required"></span></th>
                                                <th>{:strtoupper(lang("weight"))}/CTN <span class="required"></span></th>
                                                <th>{:strtoupper(lang("description"))}</th>
                                                <th>{:strtoupper(lang("barcode"))}</th>
                                                <th v-for="(oldtz,index) in dataval[0].datvis[0].symbol">
                                                    <a href="#" data-toggle="tooltip" data-placement="top" :title="oldtz.key">{{oldtz.key}}</a>
                                                    <button type="button" class="btn btn-xs btn-default" @click="delclass(index)" ><span class="glyphicon glyphicon-remove" style="margin:0"></span></button>
                                                </th>
                                                <th>
                                                    <select class="form-control addsel_zh" style="width:120px" data-toggle="tooltip" data-placement="top" title="新特征设置" v-model="seladdsttr" v-if="attris_show">
                                                        <option value="0"  style="cursor:no-drop">{:strtoupper(lang("please_select_a_feature"))}</option>
                                                        <option :value="newattr.id" v-for="newattr in attrarr.pt" :disabled="newattr.hasadd">{{newattr.content}}</option>
                                                    </select>
                                                </th>
                                                <th><button type="button" class="btn btn-default addspecial" data-toggle="tooltip" data-placement="top" title="添加特征"  @click="setTzfun(L_index)"  v-if="attris_show"><span class="glyphicon glyphicon-step-forward" style="margin:0"></span></button></th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr v-for="(item,index) in dataval[0].datvis">
                                                <td>
                                                    <input type="text" @change="changeval(index,'model',$event)" v-model="dataval[L_index].datvis[index].model" class="form-control" placeholder="">
                                                </td>
                                                <td>
                                                    <input type="text" @change="changeval(index,'factory_model',$event)" v-model="dataval[L_index].datvis[index].factory_model" class="form-control" placeholder="">
                                                </td>
                                                <td>
                                                    <input type="text" @change="changeval(index,'package_qty',$event)" v-model="dataval[L_index].datvis[index].package_qty" class="form-control" style="width:56px;text-align:right" value="1" />
                                                </td>
                                                <td>
                                                    <input type="text" @change="changeval(index,'qty',$event)" v-model="dataval[L_index].datvis[index].qty" class="form-control" style="width:56px;text-align:right" value="10" />
                                                </td>
                                                <td>
                                                    <input type="text" @change="changeval(index,'ctn_size',$event)" v-model="dataval[L_index].datvis[index].ctn_size" class="form-control" style="width:120px;text-align:center" placeholder="LxWxH cm" />
                                                </td>
                                                <td >
                                                    <input type="number" @change="changeval(index,'ctn_kgs',$event)" v-model="dataval[L_index].datvis[index].ctn_kgs" class="form-control" style="width: 100px;text-align:right" placeholder="KGS" />
                                                </td>
                                                <td>
                                                    <input type="text" v-model="dataval[L_index].datvis[index].ctn_note" class="form-control" placeholder="" />
                                                </td>
                                                <td>
                                                    <div class="input-group">
                                                            <input type="text" name='aaa' @change="changeval(index,'codebar',$event)" v-model="dataval[L_index].datvis[index].codebar" class="form-control" placeholder="条码自动生成"  value="123" />
                                                        <span class="input-group-btn">
                                                            <button class="btn btn-default" type="button" @click="getBarCode(index,'codebar',$event)"><span class="glyphicon glyphicon-cloud-download"></span></button>
                                                        </span>
                                                    </div><!-- /input-group -->
                                                </td>

                                                <td v-for="(oldtz,ikey) in dataval[L_index].datvis[index].symbol">
                                                    <select  class="form-control" v-model="dataval[L_index].datvis[index].symbol[ikey].selval" @change="changeselval(index,ikey,$event)">
                                                            <option value="0">{:strtoupper(lang('please_select'))}</option>
                                                        <option :value="valitem.val" v-for="valitem in dataval[L_index].datvis[index].symbol[ikey].value">{{valitem.name}}</option>
                                                    </select>
                                                </td>
                                                <td colspan="2" >
                                                    <button type="button" class="btn btn-default addvis" data-toggle="tooltip" data-placement="top" @click="addvis(L_index,index)" title="添加品种"><span class="glyphicon glyphicon-save" style="margin:0"></span></button>
                                                    <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" @click="delvis(L_index,index)"  title="删除品种"><span class="glyphicon glyphicon-open" style="margin:0"></span></button>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                                </div>
                        </div>
                    </div>
                    
                </div>
            </div>
        </div>

        <!-- 介绍 -->
        <div role="tabpanel" class="tab-pane row" id="introduce" style="margin-top:20px" v-if="type=='edit'"> 
            <div class="row">
                <div class="col-md-12 text-right">
                	<a href="{:url('product/proAddNewJump_introAdd',array('pro_id'=>$id,'request'=>'add'))}" type="button" class="btn btn-primary" data-toggle="modal" data-target="#prointro_editModal" style="margin-right: 0.85%"><span class="glyphicon glyphicon-plus"></span>{:strtoupper(lang('add'))} {:strtoupper(lang('information'))} {:strtoupper(lang('content'))}</a>
                </div>
            </div>
            <div >
                <div class="col-md-12 column">
                    <table class="table table-striped ntTable">
                        <thead>
                            <tr>
                                <td>No.</td>
                                <td>{:strtoupper(lang("introduction_type"))}</td>
                                <td>{:strtoupper(lang("the_role_of_product"))}({:strtoupper(lang('serial_number'))}/{:strtoupper(lang("model"))})</td>
                                <td>{:strtoupper(lang('language'))}</td>
                                <td>{:strtoupper(lang('status'))}</td>
                                <td class="sorting"  @click="sortfun" data-order="1">{:strtoupper(lang('edit'))}</td>
                                <td style="text-align: center;">{:strtoupper(lang('operate'))}</td>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="(item,index) in listdata" v-cloak>
                                <td align="center">{{item.id}}</td>
                                <td>{{item.content}}</td>
                                <td>{{item.prochar_id ? item.prochar_id +' / ' : ''}}  {{item.prochar_model}}</td>
                                <td>{{item.langStr}}</td>
                                <td>{{item.verify}}</td>
                                <td>{{item.create_name}}<br /><small>{{item.created_time}}</small></td>
                                <td class="text-right">
                                    <div>
                                        <a :href="'/admin/product/proAddNewJump_introEdit?id='+item.id+'&pro_id='+pro_id+'&prochar_id='+item.prochar_id+'&request=edit'" class='btn btn-sm btn-primary' data-toggle="modal" data-target="#prointro_editModal"><span class="glyphicon glyphicon-pencil"></span> {:strtoupper(lang('edit'))}</a>
                                        <a href="#" class='btn btn-sm btn-default' @click="requestDel(item.id,pro_id)"><span class="glyphicon glyphicon-remove"></span> {:strtoupper(lang('delete'))}</a>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- 配件 -->
        <div role="tabpanel" class="tab-pane row" id="accessories" style="margin-top:20px" v-if="type=='edit'">
            <div class="row">
                <div class="col-md-12 text-right form-inline">
                    <div class="form-group">
                            {:strtoupper(lang("the_role_of_product"))}<span class="required"></span>
                        <select class="form-control" id="itemProchar" @click="getitemdata" v-cloak>
                            <option v-for="(itemchar,indexchar) in prochar" :value="itemchar.id">{{formatUnit(itemchar.id,'id')}} {{itemchar.feature_name ? ' / 型号：'+itemchar.feature_name : '' }}</option>
                        </select>
                    </div>
                    <a href="{:url('product/proAddNewJump_itemNewAdd',array('pro_id'=>$id))}" type="button" class="btn btn-primary" data-toggle="modal" data-target="#proitem_newModal"><span class="fa fa-star"></span>{:strtoupper(lang('generate_new_products_as_accessories'))}</a>
                    <a href="{:url('product/proAddNewJump_itemAdd',array('pro_id'=>$id,'request'=>'add'))}" type="button" class="btn btn-primary" data-toggle="modal" data-target="#pro2item_editModal" style="margin-right: 0.85%"><span class="fa fa-search-plus"></span>添加现有产品做为配件</a>
                </div>
            </div>
            <div >
                <div class="col-md-12 column">
                    <table class="table table-striped ntTable">
                        <thead>
                            <tr>
                                <td>No.</td>
                                <td>&nbsp;</td>
                                <td class="sorting">{:strtoupper(lang('serial_number'))}/{:strtoupper(lang("brand"))}/{:strtoupper(lang("product_name"))}/{:strtoupper(lang('model'))}</td>
                                <td class="sorting">{:strtoupper(lang("quantity"))}</td>
                                <td class="sorting">{:strtoupper(lang('status'))}</td>
                                <td class="sorting">{:strtoupper(lang("box_measure"))}</td>
                                <td>{:strtoupper(lang('edit'))}</td>
                                <td>{:strtoupper(lang('operate'))}</td>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="(item,index) in itemlistdata" v-cloak>
                                <td align="center">{{ formatUnit(item.prochar_id2item,'id')}}</td>
                                <td><img :src="item.proimg_url" border="0" width="48px" height="48px"></td>
                                <td> <small>{{ formatUnit(item.prochar_id2item,'id') + (item.brand_name ? ' / ' + item.brand_name : '') + (item.model ? ' / ' + item.model :'')}}</small> <br />{{item.content}} </td>
                                <td align="center">{{item.qty}}</td>
                                <td align="center">{{item.status}}</td>
                                <td>
                                    {{item.ctn_size}}
                                </td>
                                <td>{{item.create_name}}<br /><small>{{item.create_at}}</small></td>
                                <td class="text-right">
                                    <div>
                                        <a :href="'/admin/product/proAddNewJump_itemEdit?item_id='+item.id+'&request=edit'" class='btn btn-sm btn-primary' data-toggle="modal" data-target="#pro2item_editModal">
                                            <span class="glyphicon glyphicon-pencil"></span> {:strtoupper(lang('edit'))}
                                           </a>
                                        <a href="#" class='btn btn-sm btn-default' @click="itemChangeStatus(item.id)">
                                            <span class="glyphicon glyphicon-remove"></span> {:strtoupper(lang('delete'))}
                                        </a>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <ul class="pagination" id="pagination" v-show="itemlistdata.length!=0">
                    </ul>
                </div>
            </div>
        </div>

        <!-- 图片 -->
        <div role="tabpanel" class="tab-pane row" id="img" style="margin-top:20px" v-if="type=='edit'">
            <div >
                <div style="padding-bottom:1em ">
                    <div class="col-md-12 text-right">
                        <a href="{:url('product/proAddNewJump_multiImgAdd',array('pro_id'=>$id))}" type="button" class="btn btn-primary" data-toggle="modal" data-target="#proimgs_uploadModal"><span class="fa fa-upload"></span>{:strtoupper(lang('multi-picture_upload'))}</a>
                        <a href="{:url('product/proAddNewJump_imgAdd',array('pro_id'=>$id))}" type="button" class="btn btn-primary" data-toggle="modal" data-target="#proimg_editModal" ><span class="fa fa-file-upload"></span>{:strtoupper(lang('upload_product_image'))}</a>
                    </div>
                </div>
            
                <div >
                    <div class="col-lg-2 col-md-3 col-ms-4 col-xs-6" v-for="(item,index) in imglist">
                        <div class="panel panel-default text-center">
                            <div class="panel-body">
                                <div>
                                <img :src="item.img_url+'?'+Math.random()" style="width: 128px;height:128px;">
                                </div>
                                <div class="btn-group">
                                    <a :href="'/admin/product/proAddnew_imgedit?request=edit&img_id='+item.id+'&pro_id='+item.pro_id+'&prochar_id='+item.prochar_id" class="btn btn-sm btn-primary" data-toggle="modal" data-target="#proimg_editModal"><span class="glyphicon glyphicon-pencil"></span>{:strtoupper(lang('edit'))}</a>
                                    <button class="btn btn-sm btn-default" @click="delimg(item.id)"><span class="glyphicon glyphicon-remove"></span>{:strtoupper(lang('delete'))}</button>
                                </div>
                            </div>
                            <div class="panel-footer">
                                <template v-if="item.prochar_id">
                                    <small v-cloak v-if="item.is_icon!=1">角色{:strtoupper(lang('icon'))}：{{item.name}}</small>
                                    <small v-cloak v-else>'角色图片'：{{item.name}}</small>
                                </template>
                                <template v-else>
                                    <small v-cloak>{{ item.is_icon != 1 ? '图片' : '{:strtoupper(lang('icon'))}' }}：{{item.name}}</small>
                                </template>
                            </div>
                        </div>
                    </div>
                </div>
        
            </div>
        </div>
    </div>









    <input type="hidden" value="{if isset($id)}{$id}{/if}" id="did">
    <input type="hidden" value="{$type}" id="type">
    <!--产品介绍添加弹窗部分 开始-->
    <div class="modal fade" id="prointro_editModal" tabindex="-1" role="dialog" aria-labelledby="ntModalLabel" aria-hidden="true"  data-backdrop="static" data-keyboard="false">
        <div class="modal-dialog modal-lg">
            <div class="modal-content" style="width:1000px">

            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>

    <!-- 产品分类弹框 -->
    <div class="modal fade" id="procat_setModal" tabindex="-1" role="dialog" aria-labelledby="ntModalLabel" aria-hidden="true"  data-backdrop="static" data-keyboard="false">
            <div class="modal-dialog modal-lg">
                <div class="modal-content" style="width:1000px">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title" id="ntModalLabel">产品分类设置</h4>
                    </div>
                    <div class="modal-body">
                        <form class="row clearfix formbox">
                            <div class="col-md-12 column">
                                <div class="cat_panel pre-scrollable" style="overflow-y:auto;overflow-x:auto;width:100%;height:300px;">
                                    <table class="table table-striped ntTable" v-cloak>
                                        <thead>
                                            <tr>
                                                <td colspan="2">{:strtoupper(lang('product_category'))}<span class="required"></span></td>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr v-for="(item,index) in productCate">
                                                <td>
                                                    <label style="width: 100%;font-weight: normal;">
                                                    <span><input type="checkbox" name="setclass" :checked="procate.indexOf(item.id)!=-1" :value="item.id+'/'+item.content" ></span>
                                                    <span :style="{paddingLeft:24*item.level+'px',display:'inline-block',marginLeft:'100px'}">{{item.content}}</span>
                                                    </label>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        
                        <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span>{:strtoupper(lang('cancel'))}</button>
                        <button type="button" class="btn btn-primary" @click="enter" style="padding-left:24px;padding-right:24px"><span class="glyphicon glyphicon-ok"></span>{:strtoupper(lang('confirm'))}</button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal -->
    </div>

    <!--添加现有产品作为配件弹窗部分 开始-->
    <div class="modal fade" id="pro2item_editModal" tabindex="-1" role="dialog" aria-labelledby="ntModalLabel" aria-hidden="true"  data-backdrop="static" data-keyboard="false">
        <div class="modal-dialog modal-lg">
            <div class="modal-content" style="width:1000px">

            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
    
    <!--生成新的产品做配件弹窗部分 开始-->
    <div class="modal fade" id="proitem_newModal" tabindex="-1" role="dialog" aria-labelledby="ntModalLabel" aria-hidden="true"  data-backdrop="static" data-keyboard="false">
        <div class="modal-dialog modal-lg">
            <div class="modal-content" style="width:1000px">
            
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>

  </div>
</div>

<!--多产品图片添加 开始-->
<div class="modal fade" id="proimgs_uploadModal" tabindex="-1" role="dialog" aria-labelledby="ntModalLabel" aria-hidden="true"  data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog modal-lg">
        <div class="modal-content" style="width:1000px">
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

<!--产品图片添加/修改部分 开始-->
<div class="modal fade" id="proimg_editModal" tabindex="-1" role="dialog" aria-labelledby="ntModalLabel" aria-hidden="true"  data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog modal-lg">
        <div class="modal-content" style="width:1000px">
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<script>
    $(function () { $("[data-toggle='tooltip']").tooltip(); });
</script>
<script src="/static/Admin/js/addnew.js"></script> 


{include file="public/foot"/}